<template>
  <div class="navclass">
    
     <ul class="layui-nav " lay-filter="">
  
   <li class="layui-nav-item " v-if=state :class="this.nav_type=='/userhome'?'layui-this':''">
    <router-link :to="{path:'/userhome' }">个人中心</router-link>
  </li>
   <li class="layui-nav-item"  :class="this.nav_type=='/user_gwc'?'layui-this':''">
    <router-link :to="{path:'/user_gwc'}">购物车<span class="layui-badge" v-if="this.$store.getters.getGwc>1">{{this.$store.getters.getGwc}}</span></router-link>
  </li>
   <li class="layui-nav-item " v-if=state1 :class="this.nav_type=='/login'?'layui-this':''">
    <router-link :to="{path:'/login'}">登录/注册</router-link>
  </li>
  <li class="layui-nav-item" v-if=state> 
    <!-- 渲染头部用户头像                    -->
    <a href="javascript:;">
       <img 
       style="margin: 10px 10px"
        referrer="no-referrer|origin|unsafe-url"
         class="layui-nav-img"
         :src=" this.$store.getters.getUser.avatar"
          fit="fill">
     
    {{this.$store.getters.getUser.username}}</a>
    <dl class="layui-nav-child">
      <dd><router-link :to="{path:'/userhome/user_geren' }">修改信息</router-link></dd>
      <dd><router-link :to="{path:'/userhome/shezhi' }">账号设置</router-link></dd>
      <dd><a style=" cursor:pointer " @click="tuichu">退出登录</a></dd>
    </dl>
  </li>
 
  <li class="layui-nav-item" :class="this.nav_type=='/index'?'layui-this':''" >
    <!-- <a href="">控制台<span class="layui-badge">9</span></a> -->
    <router-link :to="{path:'/index'}">首页</router-link>
  </li>
</ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
 
    data() {
      return {
        gwc_number:0,
        activeIndex: '1',
        activeIndex2: '1',
        state:true,       //登录状态
        state1:false,    //未登录状态
        userInfo:{},
        lianjie:'javascript:',
        
        nav_type:'' //修改nav样式
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        ;
      },
      ifthis(){  //判断页面
          
          this.nav_type=this.$router.currentRoute.fullPath
          
      },
   

      getUser(){            //获取用户信息
         const token=localStorage.getItem("token");
         if(!token){
           this.state=false;
          this.state1=true;
          
           
         }else{
           this.userInfo=JSON.parse(localStorage.getItem("userInfo")); //将json字符串转换成JSON类型
          this.state1=false;
          this.state=true;
          
          ;
           
        axios.get(
                    "/fl-carts/selectAllCartsByUsername",
                    {
                      params: {
                        username: JSON.parse(localStorage.getItem("userInfo")).username,
                      },
                      headers: {
                        Authorization: localStorage.getItem("token"),
                      },
                    }
                  ).then((res)=>{
                      
                       this.$store.commit("SET_GWC", res.data.data.length);
                  })
      
         }
        

      },
      tuichu(){

         this.$confirm('是否退出登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {this.lianjie='/supplier'
          this.qingkong();
          this.$router.push('/index');
          this.$message({
            
            type: 'success',
            message: '退出成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });          
        });
},
    qingkong(){
       this.$store.commit("REMOVE_INFO");         // 调用vuex清空用户缓存退出登录
        // this.$router.go(0);
         this.state=false;
          this.state1=true;

        //  this.$router.push('/book');
    }
       
      

    },
          mounted(){                  //vue使用js渲染dom，layui在加载模块时通过第一次调用模块的render()、init()方法来进行初始渲染，所以当首先加载layui.all.js，后加载vue的app.js时，会出现vue渲染的dom没有被处理的情况，需要在mounted方法里手动渲染
        layui.element.render();
    },
    created() {
      this.getUser();
       this.ifthis()
       this.gwc_number=localStorage.getItem('gwc_number');
      
    }
  
}
</script>

<style scoped>
.navclass{
  height: 60px;
  width: 100%;
   /* overflow: hidden; */
}
   .layui-nav{
  
    margin-bottom: 10px;
  float: left;
    width: 99.98%;
    /* margin-bottom: 20px; */
  }
  .layui-nav .layui-nav-item{
    

    background:#393D49;
   float:  right;
  margin:0px;
 
    
  } 
 .layui-nav .layui-nav-item a{
   color:#BAC2C6;
  
 }
 .layui-nav-child{
   position: absolute;
   width: 40px;
 }
</style>